<template>
    <n-config-provider :locale="zhCN" :date-locale="dateZhCN" :theme="theme">
        <router-view />
        <n-global-style />
    </n-config-provider>
</template>

<script lang="ts" setup>
import { computed, onMounted, onUnmounted } from 'vue'
import { zhCN, dateZhCN, darkTheme } from 'naive-ui'

import { useStore } from '@/store'

const store = useStore()

const theme = computed(() => (store.state.theme.dark ? darkTheme : undefined))

let resize = false

onMounted(() => {
    window.onresize = () => {
        if (!resize) {
            resize = true
            setTimeout(() => {
                store.state.browser.innerHeight = window.innerHeight
                store.state.browser.innerWidth = window.innerWidth
                store.state.theme.collaps = window.innerWidth < 1440

                resize = false
            }, 200)
        }
    }
})

onUnmounted(() => {
    window.onresize = null
})
</script>
